import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { FirstHeaderC, TabC } from '../../../comps';
import FixedIncome from './fixedIncome'; //固定收益类
import Equity from './equity'; //权益类
import Commodities from './commodities'; //商品及衍生品类
import CardC from '../../workStation/Barra/comps/cardC';
import styles from './index.less';
import { message } from 'antd';

@connect(({ loading, keyFiguresM }) => ({ loading, keyFiguresM }))
export default class KeyFigures extends PureComponent {
  state = {
    activeKey: 'fixedIncome',
  };
  componentDidMount() {
    const { dispatch } = this.props;
    // 获取固定收益类数据
    let fixedIncomeData = new Promise((resolve, reject) => {
      dispatch({
        type: 'keyFiguresM/getFixedIncomeData',
        // payload没有参数需要占位 ！！！！
        payload: {},
      }).then((res) => {
        resolve(res);
      });
    });
    // 获取权益类数据
    let equityDat = new Promise((resolve, reject) => {
      dispatch({
        type: 'keyFiguresM/getEquityData',
        payload: {},
      }).then((res) => {
        resolve(res);
      });
    });
    // 获取商品及衍生品类数据
    let commoditiesDat = new Promise((resolve, reject) => {
      dispatch({
        type: 'keyFiguresM/getCommoditiesData',
        payload: {},
      }).then((res) => {
        resolve(res);
      });
    });
    //全部查询完成后
    Promise.all([fixedIncomeData, equityDat, commoditiesDat]).then((result) => {
      console.log(result);
      let maxLength = Math.max(result[0]?.length, result[1]?.length, result[2]?.length);
      switch (maxLength) {
        case result[0].length:
          this.setState({ activeKey: 'fixedIncome' });
          break;
        case result[1].length:
          this.setState({ activeKey: 'equity' });
          break;
        case result[2].length:
          this.setState({ activeKey: 'commodities' });
          break;
      }
    });
  }

  /**
   * 是否允许切换判断
   * @param activeKey
   * @returns {boolean}
   */
  isAllowSwitch = (activeKey) => {
    const {
      keyFiguresM: { fixedIncomeData = [], equityData = [], commoditiesData = [] },
    } = this.props;
    if (activeKey === 'fixedIncome') return fixedIncomeData.length !== 0;
    if (activeKey === 'equity') return equityData.length !== 0;
    if (activeKey === 'commodities') return commoditiesData.length !== 0;
  };
  // tab切换
  childrentabOnclick = (activeKey) => {
    if (this.isAllowSwitch(activeKey)) {
      this.setState({ activeKey });
    }
  };

  render() {
    const {
      keyFiguresM: { fixedIncomeData = [], equityData = [], commoditiesData = [] },
    } = this.props;
    return (
      <div>
        <CardC
          title='关键指标跟踪'
          type='21'
          noVideo={true}
          titleIsShow={false}
          content={
            <div>
              <TabC
                type='secondTab'
                tabSource={[
                  {
                    title: (
                      <span className={styles.titleContent} style={fixedIncomeData.length === 0 ? { color: 'rgba(0,0,0,.25)', cursor: 'not-allowed' } : {}}>
                        {`固定收益类`} <span className={styles.numberBorder}>{fixedIncomeData.length}</span>
                      </span>
                    ),
                    key: 'fixedIncome',
                    content: <FixedIncome onRef={(ref) => (this.FixedIncomeRef = ref)} />,
                  },
                  {
                    title: (
                      <span className={styles.titleContent} style={equityData.length === 0 ? { color: 'rgba(0,0,0,.25)', cursor: 'not-allowed' } : {}}>
                        {`权益类`}
                        <span className={styles.numberBorder}>{equityData.length}</span>
                      </span>
                    ),
                    key: 'equity',
                    content: <Equity onRef={(ref) => (this.EquityRef = ref)} />,
                  },
                  {
                    title: (
                      <span className={styles.titleContent} style={commoditiesData.length === 0 ? { color: 'rgba(0,0,0,.25)', cursor: 'not-allowed' } : {}}>
                        {`商品及衍生品类`}
                        <span className={styles.numberBorder}>{commoditiesData.length}</span>
                      </span>
                    ),
                    key: 'commodities',
                    content: <Commodities onRef={(ref) => (this.CommoditiesRef = ref)} />,
                  },
                ]}
                activeKey={this.state.activeKey}
                onChange={this.childrentabOnclick}
              />
            </div>
          }
        />
      </div>
    );
  }
}
